<template>
  <div class="myTravel">
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media">
              <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="../../assets/images/1.png">
                <div class="mui-media-body">
                  <div>
                    Day1:<span>东京DFS环球免税店</span>
                  </div>
                  <div>
                    提货日期：2018-10-12<span>即将开始</span>
                  </div>
                  <div>
                    提货地址：大手盯三井花园酒店三井花園ホテル
                  </div>
                  <div>
                    <button type="button" class="mui-btn mui-btn-warning">查看拍单</button>
                    <button type="button" class="mui-btn mui-btn-danger">进店逛逛</button>
                    <button type="button" class="mui-btn mui-btn-outlined">领券</button>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  data () {
    return {
    }
  },

  methods: {},

  created () {
  }
}
</script>

<style lang='less' scoped>
.mui-table-view .mui-media-object{
  width:80px;
  height:80px;
  max-width: 80px;
}
.myTravel{
   .mui-card{
    margin: 15px 0px;
    box-shadow:none;
    border-radius:10px;
    border: 1px solid #E7E7E7;
    .mui-card-content-inner{
      padding: 25px 5px;
      .mui-table-view-cell{
        padding: 11px 10px;
        
      }
      .mui-media-body{
        div{
          margin-bottom: 8px;
          color: #666;
          font-size: 12px;
        }
        div:nth-child(1){
          color: #E4007B;
          font-size: 14px;
          font-weight: bold;
          span{
            color: #333;
          }
        }
        div:nth-child(2){
          span{
            color: #fff;
            width:46px;
            height:14px;
            background: #E4007B;
            border-radius: 3px;
            padding: 2px 3px;
            margin-left: 3px;
          }
        }
        div:nth-child(3){
          width:80%;
          white-space:normal;
        }
        div:nth-child(4){
          button{
            width:67px;
            height:31px;
            font-size: 12px;
            border: none;
            text-align: center;
            padding: 0px;
            border-radius: 5px;
          }
          .mui-btn-warning{
            background: #FDDF00; 
            color: #000;
          }
          .mui-btn-danger{
            background: #003A9B ;
            margin-left: 22px;
          }
        }
      }
    }
  }
}
</style>
